import React from "react"
import ReactDOM from "react-dom"
import AJAX from "../../../../lib/ajax"
import wx from "wx";
require('./Pay.less')
const Dialog = require('../Dialog')


class DialogAdress extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            yue_show: true,     //是否显示余额支付，默认显示
            show: false,
            current_pay: "WEIXIN",
            show_dialog: false,
            account: null
        }
    }

    componentWillMount() {
        AJAX.request("user_home", {}, (data) => {
            const account = data.body.account.balance
            // const dataSource = this.props.dataSource || {}
            const dataSource = this.props.dataSource
            let current_pay = "WEIXIN"
            // if(dataSource.real_fee){
            //     if(account >= dataSource.real_fee){
            //         current_pay = "YUE"
            //     }
            // }
            this.setState({
                account,
                current_pay
            })

            this.showDialog("HIDE")()
        })
    }
    showDialog(key) {
        return () => {
            this.setState({
                show: key === "SHOW"
            })
        }
    }
    check(key) {
        const dataSource = this.props.dataSource || {}
        if (key === this.state.current_pay || this.state.account < dataSource.real_fee) {
            return () => { }
        } else {
            return () => {
                this.setState({
                    current_pay: key
                })
            }
        }
    }
    wxPay(params) {
        var _this = this;
        const dataSource = this.props.dataSource
        AJAX.request("get_signature", {
            full_url: window.location.href
        }, (data) => {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.body.appid, // 必填，公众号的唯一标识
                timestamp: data.body.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.body.noncestr, // 必填，生成签名的随机串
                signature: data.body.signature,// 必填，签名，见附录1
                jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
            wx.ready(() => {
                wx.chooseWXPay({
                    timestamp: params.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
                    package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                    signType: params.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: params.paySign, // 支付签名
                    success: function (res) {
                        dataSource.callback(res)
                    }
                })
            })
        })
    }

    //支付成功弹窗提示
    info() {
        Dialog.info({
            title: "",
            content: "本次快递费用已支付成功！您可以在个人中心查看订单状态。",
            okText: "知道了",
            onOK: () => {
                const wx_type = window.localStorage.getItem('wx_type');
                window.location.href = `./PickUp?wx_type=${wx_type}`;   //返回首页
            }
        })
    }


    submit() {
        var _this = this;
        return () => {
            if (this.state.current_pay === "YUE") {
                const dataSource = this.props.dataSource
                AJAX.request("request_balance", {
                    type: dataSource.type,  //运单类型（1:国内 3:柜体）,默认1
                    order_id: dataSource.order_id,
                    real_fee: dataSource.real_fee,
                    coupon_reason_id: dataSource.coupon_reason_id,
                    coupon_remark: dataSource.coupon_remark
                }, (data) => {
                    if (data.code == 0) {
                        // dataSource.callback()
                        _this.info()    //支付成功弹窗提示
                        this.showDialog("HIDE")()
                    }
                })
            } else if (this.state.current_pay === "WEIXIN") {
                const data = this.props.dataSource
                AJAX.request("request_wx", {
                    type: data.type,  //运单类型（1:国内 3:柜体）,默认1
                    order_id: data.order_id,
                    real_fee: data.real_fee,
                    coupon_reason_id: data.coupon_reason_id,
                    coupon_remark: data.coupon_remark
                }, (data) => {
                    if (data.code == 0) {
                        this.wxPay(data.body.prepay)
                        this.showDialog("HIDE")()
                    }
                })
            }
        }
    }

    render() {
        const show = this.state.show
        const mask = show ? " weui-mask" : "weui-mask none"
        const actionsheet = show ? " weui-actionsheet dialog weui-actionsheet_toggle" : "weui-actionsheet dialog"

        const pay = this.state.current_pay
        const data = this.props.dataSource || {}
        const money_classname = this.state.account < data.real_fee ? " grey" : ""
        const left_money = this.state.account !== null
            ? <span className="money">
                {`(${this.state.account / 100}元)`}
            </span>
            : ""

        var yue_show = data.yue_show === false ? false : true    //是否显示余额支付，默认显示
        return (
            this.props.can_cancel ? <div className="pay flex">
                <a href="javascript:;" className="weui-btn weui-btn_plain-orange flex1"
                    onClick={this.showDialog("SHOW")}
                >支付</a>
                <a href="javascript:;" className="weui-btn weui-btn_plain-orange flex1"
                    onClick={this.props.cancel.bind(this.props.this)}
                >取消订单</a>
                <div className={mask} id="mask" onClick={this.showDialog("HIDE")}></div>
                <div className={actionsheet} id="weui-actionsheet">
                    <div className="weui-cells weui-cells_form content">
                        <div className="weui-cells__title comment-title">
                            <i className="iconfont icon-cha" onClick={this.showDialog("HIDE")}></i>支付
                        </div>
                    </div>
                    <div className="weui-cells weui-cells_radio" >
                        {yue_show &&
                            <label className="weui-cell weui-check__label" for="x11" onClick={this.check("YUE")}>
                                <div className={`weui-cell__bd icon-row${money_classname}`}>
                                    <i className="iconfont icon-shoufujine"></i>
                                    <p>余额支付{left_money}</p>
                                </div>
                                <div className="weui-cell__ft">
                                    <input type="radio" className="weui-check" name="radio1" id="x11"
                                        checked={pay === "YUE" ? "checked" : ""} />
                                    <span className="weui-icon-checked"></span>
                                </div>
                            </label>}

                        <label className="weui-cell weui-check__label" for="x12" onClick={this.check("WEIXIN")}>
                            <div className="weui-cell__bd icon-row">
                                <i className="iconfont icon-iconfontweixin"></i>
                                <p>
                                    微信支付
                                </p>
                            </div>
                            <div className="weui-cell__ft">
                                <input type="radio" name="radio1" className="weui-check" id="x12"
                                    checked={pay === "WEIXIN" ? "checked" : ""} />
                                <span className="weui-icon-checked"></span>
                            </div>
                        </label>
                        <div className="weui-cell">
                            <div className="pay-text">
                                {pay === "WEIXIN" ? "微信支付" : "余额支付"}
                            </div>
                            <div className="pay-money">
                                {(data.real_fee / 100).toFixed(2)}元
                            </div>
                        </div>
                    </div>

                    <div className="weui-actionsheet__action btn-block">
                        <div className="weui-actionsheet__cell btn" id="actionsheet_cancel"
                            onClick={this.submit()}>提交</div>
                    </div>
                </div>
            </div> :
                <div className="pay">
                    <a href="javascript:;" className="weui-btn weui-btn_plain-orange"
                        onClick={this.showDialog("SHOW")}
                    >支付</a>
                    <div className={mask} id="mask" onClick={this.showDialog("HIDE")}></div>
                    <div className={actionsheet} id="weui-actionsheet">
                        <div className="weui-cells weui-cells_form content">
                            <div className="weui-cells__title comment-title">
                                <i className="iconfont icon-cha" onClick={this.showDialog("HIDE")}></i>支付
                            </div>
                        </div>
                        <div className="weui-cells weui-cells_radio" >
                            {yue_show &&
                                <label className="weui-cell weui-check__label" for="x11" onClick={this.check("YUE")}>
                                    <div className={`weui-cell__bd icon-row${money_classname}`}>
                                        <i className="iconfont icon-shoufujine"></i>
                                        <p>余额支付{left_money}</p>
                                    </div>
                                    <div className="weui-cell__ft">
                                        <input type="radio" className="weui-check" name="radio1" id="x11"
                                            checked={pay === "YUE" ? "checked" : ""} />
                                        <span className="weui-icon-checked"></span>
                                    </div>
                                </label>}
                            <label className="weui-cell weui-check__label" for="x12" onClick={this.check("WEIXIN")}>
                                <div className="weui-cell__bd icon-row">
                                    <i className="iconfont icon-iconfontweixin"></i>
                                    <p>
                                        微信支付
                                    </p>
                                </div>
                                <div className="weui-cell__ft">
                                    <input type="radio" name="radio1" className="weui-check" id="x12"
                                        checked={pay === "WEIXIN" ? "checked" : ""} />
                                    <span className="weui-icon-checked"></span>
                                </div>
                            </label>
                            <div className="weui-cell">
                                <div className="pay-text">
                                    {pay === "WEIXIN" ? "微信支付" : "余额支付"}
                                </div>
                                <div className="pay-money">
                                    {(data.real_fee / 100).toFixed(2)}元
                                </div>
                            </div>
                        </div>

                        <div className="weui-actionsheet__action btn-block">
                            <div className="weui-actionsheet__cell btn" id="actionsheet_cancel"
                                onClick={this.submit()}>提交</div>
                        </div>
                    </div>
                </div>
        )
    }
}

module.exports = DialogAdress